
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>搜索框输入文字自动提示</title>
	<link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
	<style type="text/css">
		.container {
			padding-top: 150px;
		}
		.list-group {
			display: none;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="form-group">
			<input type="text" class="form-control" placeholder="请输入搜索关键字" id="search">
			<ul class="list-group" id="list-box">
				
			</ul>
		</div>
    </div>
    <script src="/js/ajax.js"></script>
    <script src="/js/template-web.js"></script>
    <script type="text/html" id="tpl">
        {{each result}}
        <li class="list-group-item">{{$value}}</li>
        {{/each}}
    </script>
    <script>
        var searchInp = document.getElementById('search');
        var listBox = document.getElementById('list-box');
        var timer = null;
        searchInp.oninput = function () {
            clearTimeout(timer);
            var key = this.value;

            if(key.trim().length == 0){
                listBox.style.display = 'none';
                return;
            }

            timer = setTimeout(function () {
                ajax({
                type:'get',
                url:'http://localhost:3000/searchAutoPrompt',
                data:{
                    key: key
                },
                success:function(result){
                    var html = template('tpl',{result:result});
                    listBox.innerHTML = html;
                    listBox.style.display = 'block';
                }
            })
            },800)
            
        };
    </script>
</body>
</html>